<template>
	<div>
		<el-container>
			<el-aside width="200px" router>
				<el-row class="tac">
					<el-col :span="12">
						<el-menu default-active="/Listshop" class="el-menu-vertical-demo" @select="handleSelect">
							<el-menu-item index="/first">
								<span slot="title">表格页</span>
							</el-menu-item>
							<el-menu-item index="/sencond">
								<span slot="title">第二页</span>
							</el-menu-item>
							<el-menu-item index="/three">
								<span slot="title">第三页</span>
							</el-menu-item>
							</el-menu-item>
						</el-menu>
					</el-col>
				</el-row>
			</el-aside>
			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default {
		methods: {
			handleSelect(key, keyPath) {
				console.log(key);
				this.$router.push(key);
			}
		}
	}
</script>

<style scoped>
.el-header,
	.el-footer {
		background-color: #545C65;
		color: #fff;
		text-align: center;
		line-height: 60px;
	}

	.el-aside {
		/* background-color: #D3DCE6; */
		color: #333;
		text-align: center;
		line-height: 200px;
	}

	.el-main {
		background-color: #E9EEF3;
		color: #333;
		text-align: center;
		line-height: 160px;
	}

	body>.el-container {
		margin-bottom: 40px;
	}

	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}

	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}

</style>
